<template>
  <el-drawer v-model="drawerVisible" :destroy-on-close="true" size="450px" :title="`${drawerProps.title}菜单`">
    <el-form
      ref="ruleFormRef"
      label-width="100px"
      label-suffix=" :"
      :rules="rules"
      :disabled="drawerProps.isView"
      :model="drawerProps.row"
      :hide-required-asterisk="drawerProps.isView"
    >
      <!-- @change="handleSelectTypeChange" -->
      <!-- <el-form-item label="类型">
        <el-select v-model="drawerProps.row!.type" placeholder="请选择类型" clearable>
          <el-option v-for="item in myType" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item> -->
      <el-form-item label="菜单类型">
        <el-radio-group v-model="drawerProps.row!.type">
          <el-radio v-for="item in myType" :key="item.value" :label="item.label" :value="item.value">{{ item.label }}</el-radio>
          <!-- <el-radio label="menu">菜单</el-radio> -->
          <!-- <el-radio label="btn">按钮</el-radio> -->
        </el-radio-group>
      </el-form-item>
      <el-form-item label="上级菜单">
        <el-cascader
          :options="getMenuArr"
          :props="{ checkStrictly: true, value: 'id', label: 'name' }"
          placeholder="请选择上级菜单"
          clearable
          class="w100"
          v-model="drawerProps.row!.pid"
        >
          <template #default="{ node, data }">
            <span>{{ data.name }}</span>
            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
          </template>
        </el-cascader>
      </el-form-item>
      <!-- <el-form-item label="上级菜单" prop="pid">
        <el-select
          ref="selectUpResId"
          v-model="selectedItem"
          placeholder="请选择上级菜单"
          class="treeselect-main"
          clearable
          @change="handleSelectChange"
        >
          <el-option :key="drawerProps.row!.pid" hidden :value="drawerProps.row!.pid" :label="selectedItem" />
          <el-tree
            :data="userList"
            :props="defaultProps"
            :expand-on-click-node="false"
            :check-on-click-node="true"
            :highlight-current="true"
            :current-node-key="drawerProps.row!.currentKey"
            @node-click="handleNodeClick"
          />
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="菜单名称" prop="meta.title">
        <el-input v-model="drawerProps.row!.meta.title" placeholder="请填写菜单名称" clearable></el-input>
      </el-form-item> -->
      <el-form-item label="菜单name" prop="name">
        <el-input v-model="drawerProps.row!.name" placeholder="请填写菜单name" clearable></el-input>
      </el-form-item>
      <!-- <el-form-item label="状态" prop="status">
        <el-select v-model="drawerProps.row!.status" placeholder="请选择状态" clearable>
          <el-option v-for="item in userStatus" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item> -->
      <el-form-item label="路由" prop="path">
        <el-input v-model="drawerProps.row!.path" placeholder="请填写路由" clearable></el-input>
      </el-form-item>
      <el-form-item label="组件路径" prop="component">
        <el-input v-model="drawerProps.row!.component" placeholder="请填写组件路径" clearable></el-input>
      </el-form-item>
      <el-form-item label="组件图标" prop="icon">
        <!-- <el-input v-model:icon-value="drawerProps.row!.icon" placeholder="请填写组件图标" clearable></el-input> -->
        <SelectIcon v-model:icon-value="drawerProps.row!.icon" placeholder="请选择组件图标" />
      </el-form-item>
      <el-form-item label="菜单启用">
        <el-switch v-model="drawerProps.row!.status" :active-value="1" :inactive-value="0" />
      </el-form-item>

      <el-form-item label="排序" prop="sort">
        <el-input v-model="drawerProps.row!.sort" placeholder="请填写排序" clearable></el-input>
      </el-form-item>
      <el-form-item label="权限标识符" prop="identification">
        <el-input v-model="drawerProps.row!.identification" placeholder="请填写权限标识符" clearable></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="memo">
        <el-input v-model="drawerProps.row!.memo" placeholder="请填写备注" clearable></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="drawerVisible = false">取消</el-button>
      <el-button v-show="!drawerProps.isView" type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts" name="menuDrawer">
import { ref, reactive, onMounted } from "vue";
// import { userStatus } from "@/utils/dict";
import { ElMessage, FormInstance } from "element-plus";
import { Tree } from "@/api/interface";
import { getMenuTreeAll } from "@/api/modules/menu";
import { useAuthStore } from "@/stores/modules/auth"; // 根据实际路径导入
import SelectIcon from "@/components/SelectIcon/index.vue";

const authStore = useAuthStore(); //仓库

const { getMenuArr } = useAuthStore();

const rules = reactive({
  // picture_path: [{ required: true, message: "请上传照片" }],
  name: [{ required: true, message: "请填写规格名称" }]
  // gender: [{ required: true, message: "请选择性别" }],
  // idCard: [{ required: true, message: "请填写身份证号" }],
  // email: [{ required: true, message: "请填写邮箱" }],
});

const myType = [
  {
    value: 0,
    label: "板块"
  },
  {
    value: 1,
    label: "模块"
  },
  {
    value: 2,
    label: "功能"
  }
];

// const defaultProps = {
//   children: "children",
//   label: "name"
// };
// const selectedItem = ref("");
// const selectUpResId = ref(null);
// const handleNodeClick = node => {
//   // this.selectedItem = node.name;
//   // 选中需要绑定的id，赋值给 this.queryParams.pid
//   selectedItem.value = node.name;
//   drawerProps.value.row.pid = node.id;
//   selectUpResId.value.blur(); // 选中后隐藏下拉框
//   console.log(222, node);
// };
// const handleSelectChange = value => {
//   console.log(111);
//   // 在这里可以执行一些与选择值相关的操作
//   // 例如更新数据或其他操作
//   // 此处也可关闭下拉框，但需要注意防止重复关闭
//   selectUpResId.value.blur(); // 选中后隐藏下拉框
// };

const userList = ref();
onMounted(async () => {
  // const myMenuData = await getMenuTreeAll();
  const myMenuData = getMenuArr;
  // 然后在你的代码中调用这个函数来处理菜单数据
  // myMenuData.data = mapMenuData(myMenuData.data);
  userList.value = myMenuData;
});

interface DrawerProps {
  title: string;
  isView: boolean;
  row: Partial<Tree.menuObject>;
  api?: (params: any) => Promise<any>;
  getTableList?: () => void;
}

const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
  isView: false,
  title: "",
  row: {
    pid: -1
  }
});

// 创建计算属性，将 pid 数组转换为单个值
// 接收父组件传过来的参数
const acceptParams = (params: DrawerProps) => {
  console.log(params, "params");
  drawerProps.value = params;
  drawerVisible.value = true;
};

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
  ruleFormRef.value!.validate(async valid => {
    if (!valid) return;
    try {
      console.log(drawerProps.value, "drawerProps.value");
      const row = drawerProps.value.row;
      await drawerProps.value.api!(row);
      ElMessage.success({ message: `${drawerProps.value.title}菜单成功！` });
      // drawerProps.value.getTableList!();
      const myMenuData = await getMenuTreeAll();
      authStore.setMenuArr(myMenuData);
      drawerVisible.value = false;
    } catch (error) {
      console.log(error);
    }
  });
};

defineExpose({
  acceptParams
});
</script>
